<!DOCTYPE html>
<ui:composition template="/master.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:define name="content">

		<br />
		<p:dataTable id="radioDT" var="cita" value="#{citaBean.listaTabla}"
			selection="#{citaBean.citaSelected}" rowKey="#{cita.id}"
			style="width:100%" rows="5" paginator="true"
			paginatorPosition="bottom"
			paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
			<f:facet name="header">
            Listado de Cita
        	</f:facet>
			<p:column selectionMode="single" style="width:16px;text-align:center"/>
			<p:column headerText="Nombre y Apellido" style="text-align:left">
			<h:outputText value="#{cita.interesado.persona.apellido}, #{cita.interesado.persona.nombre}" />
			</p:column>
			<p:column headerText="Salon" style="text-align:left">
			<h:outputText value="#{cita.salon.nombreSalon}" />
			</p:column>
			<p:column headerText="Fecha" style="text-align:left">
			<h:outputText value="#{cita.fecha}" />
			</p:column>
			<p:column headerText="Hora" style="text-align:left">
			<h:outputText value="#{cita.hora}" />
			</p:column>
			<p:column headerText="Estado" style="text-align:left">
			<h:outputText value="#{cita.estadocita.descripcion}"/>
			</p:column>
			<p:column headerText="Observacion" style="text-align:left">
			<h:outputText value="#{cita.observacion}" />
			</p:column>

			<f:facet name="footer">
			<p:commandButton process="radioDT" update=":form:citaDetail" icon="ui-icon-search" value="Detalle" oncomplete="PF('citaDialog').show()"/>
			</f:facet>
		</p:dataTable>

		<p:dialog id="citaDetail" header="Detalle de la cita" widgetVar="citaDialog"
			modal="false" showEffect="fade" hideEffect="fade" resizable="false" >
			 <p:outputPanel  style="text-align:center" >
				<p:panelGrid columns="2" rendered="#{not empty citaBean.citaSelected}" columnClasses="label,value">
					<h:outputText value="Cita:"/>
					<h:outputText value="#{citaBean.citaSelected.interesado.persona.apellido}, #{citaBean.citaSelected.interesado.persona.nombre}"/>
					
					<p:outputLabel value="Fecha"/>
        			<p:calendar id="fecha" value="#{citaBean.citaSelected.fecha}" showOn="button"/>
					
					<p:outputLabel value="Hora:"/>
       				<p:calendar id="time" value="#{citaBean.citaSelected.hora}" pattern="HH:mm a" timeOnly="true" />
       				
					<p:outputLabel value="Observacion:"/>
       				<p:inputText id="obeservacion" value="#{citaBean.citaSelected.observacion}" />       				
      				
      				<h:outputLabel value="Estado Cita:" />
					<p:selectOneMenu id="comboEstado"
						 converter="estadoCitaConverter"
						value="#{citaBean.estadoSelected}"
						 effect="fade" var="c"
						filter="true" filterMatchMode="startsWith">

						<f:selectItems var="car" value="#{citaBean.listaEstadocita}"
							itemLabel="#{car.descripcion}" itemValue="#{car}"/>
						<p:column>
						<h:outputText value="#{c.descripcion}"/>
						</p:column>
					</p:selectOneMenu>
			    	<p:commandButton id="ajax" process="@form" update=":#{p:component('radioDT')}" value="Guardar" actionListener="#{citaBean.guardarCita}" oncomplete="PF('citaDialog').hide()" />
			   </p:panelGrid>
		   </p:outputPanel>
		</p:dialog>

</ui:define>
</ui:composition>
